<template>
  <el-dialog :title="title" :visible.sync="isShow" append-to-body>
    <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="角色名称" prop="roleName" size="small">
        <el-input v-model="formData.roleName" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item prop="roleKey" size="small">
        <span slot="label">
          <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          权限字符
        </span>
        <el-input v-model="formData.roleKey" placeholder="请输入权限字符" />
      </el-form-item>
      <el-form-item label="角色顺序" prop="roleSort" size="small">
        <el-input-number v-model="formData.roleSort" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="formData.status">
          <!-- <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单权限">
        <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
        <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
        <el-checkbox v-model="formData.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
        <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!formData.menuCheckStrictly" empty-text="加载中，请稍候" :props="defaultProps"></el-tree>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="userDialogVisible = false" class="btn_cancel">取 消</el-button>
      <el-button type="primary" @click="submitFrom('addUserFrom')" class="btn_primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { treeselect as MenuTreeselect } from '@/api'
import { mapState } from 'vuex'
import { get } from '@/utils/auth'
export default {
  data () {
    return {
      // 标题
      title: undefined,
      // 弹框是是否显示
      isShow: false,
      // 表单数据
      formData: {
        roleId: undefined,  // 角色ID 
        roleName: undefined, // 角色姓名 
        roleKey: undefined, // 角色权限
        roleSort: 0,
        status: "0",
        menuIds: [],
        deptIds: [],
        menuCheckStrictly: true,
        deptCheckStrictly: true,
        remark: undefined
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" }
        ],
        roleKey: [
          { required: true, message: "权限字符不能为空", trigger: "blur" }
        ],
        roleSort: [
          { required: true, message: "角色顺序不能为空", trigger: "blur" }
        ]
      },
      // 菜单树
      menuOptions: [],
      // 菜单展开状态
      menuExpand: false,
      menuNodeAll: false,
    }
  },
  props: {
    dialogType: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    value: {
      get: function () {
        return this.dialogType
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      hanlder (t1, t2) {
        console.log(t1, t2)
        if (t1 > 0) {
          isShow = true
        }
      }
    }
  },
  methods: {
    /** 查询菜单树结构 */
    getMenuTreeselect () {
      MenuTreeselect().then(response => {
        this.menuOptions = response.data;
      });
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand (value, type) {
      if (type == 'menu') {
        let treeList = this.menuOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
        }
      } else if (type == 'dept') {
        let treeList = this.deptOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
        }
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll (value, type) {
      if (type == 'menu') {
        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
      } else if (type == 'dept') {
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
      }
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect (value, type) {
      if (type == 'menu') {
        this.formData.menuCheckStrictly = value ? true : false;
      } else if (type == 'dept') {
        this.formData.deptCheckStrictly = value ? true : false;
      }
    },
  },
  created () {
    this.getMenuTreeselect()
  },
  mounted () {

  },
  components: {},
}
</script>

<style lang='less' scoped>
</style>